本文介绍如何在 Nuxt 中使用 useHead 设置规范链接和 JSON-LD 结构化数据，帮助搜索引擎及 AI 更准确地理解页面内容，从而提升页面的 SEO 与 GEO 基础表现。
一、什么是 SEO 与 GEO
SEO 是搜索引擎优化，目的是让网页更容易被搜索引擎抓取、理解和展示。
GEO 可以理解为生成式引擎优化，重点是让 ChatGPT、Google AI 等生成式搜索工具更容易理解和引用网页内容。
在 Nuxt 中，可以使用 useHead 动态设置页面的 <head> 信息，例如：
useHead({
link: [
{
rel: 'canonical',
href: url,
},
],
script: [
{
type: 'application/ld+json',
innerHTML: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'Article',
headline: title,
description,
mainEntityOfPage: url,
}),
},
],
})
二、为什么需要设置 canonical
canonical 用于告诉搜索引擎当前页面的规范 URL。
例如，同一篇文章可能通过以下地址访问：
https://example.com/article/1
https://example.com/article/1?source=google
https://example.com/article/1?utm_campaign=test
这些地址内容相同，但 URL 不同。通过设置：
{
rel: 'canonical',
href: 'https://example.com/article/1',
}
可以告诉搜索引擎：
https://example.com/article/1才是这篇内容的正式地址。
这样可以减少重复内容问题，避免页面权重被不同 URL 分散。
三、什么是 JSON-LD 结构化数据
JSON-LD 是一种结构化数据格式，常用于向搜索引擎说明网页的类型和内容。
例如，可以告诉搜索引擎：
这是一个文章页面
文章标题是什么
文章描述是什么
作者是谁
发布时间是什么
页面主地址是什么
在 Nuxt 中，可以通过以下方式添加：
{
type: 'application/ld+json',
innerHTML: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'Article',
headline: title,
description,
mainEntityOfPage: url,
}),
}
四、每个字段的作用
1. @context
'@context': 'https://schema.org'
表示使用 Schema.org 标准描述页面内容，通常固定填写，不需要修改。
2. @type
'@type': 'Article'
表示页面类型是文章。
根据页面内容，也可以使用：
'@type': 'BlogPosting'
适合博客文章；或者：
'@type': 'NewsArticle'
适合新闻内容。
3. headline
headline: title
表示文章标题，例如：
headline: 'Nuxt 中如何使用 useHead 优化 SEO'
建议与页面上的主标题保持一致。
4. description
description: description
表示文章摘要或页面描述，建议简洁说明文章主要内容。
例如：
description: '本文介绍如何在 Nuxt 中使用 useHead 设置 canonical 和 JSON-LD 结构化数据。'
5. mainEntityOfPage
mainEntityOfPage: url
表示这篇文章对应的主要页面 URL。
例如：
mainEntityOfPage: 'https://example.com/articles/nuxt-seo'
建议使用完整的绝对 URL，而不是相对路径。
五、推荐添加的字段
除了基础字段，还可以添加图片、作者、发布者和时间信息：
useHead({
link: [
{
rel: 'canonical',
href: url,
},
],
script: [
{
type: 'application/ld+json',
innerHTML: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'Article',
headline: title,
description,
image: imageUrl,
author: {
'@type': 'Person',
name: authorName,
},
publisher: {
'@type': 'Organization',
name: siteName,
logo: {
'@type': 'ImageObject',
url: logoUrl,
},
},
datePublished: publishedAt,
dateModified: updatedAt,
mainEntityOfPage: {
'@type': 'WebPage',
'@id': url,
},
}),
},
],
})
字段说明：
image：文章主图的完整 URLauthor：作者信息publisher：发布网站或机构logo：网站或机构的 LogodatePublished：文章首次发布时间dateModified：文章最后更新时间mainEntityOfPage：文章所属的主要网页
时间建议使用 ISO 8601 格式，例如：
2025-01-01T08:00:00Z
六、Nuxt 中的完整示例
<script setup lang="ts">
const title = 'Nuxt 中如何使用 useHead 优化 SEO'
const description = '本文介绍如何在 Nuxt 中使用 useHead 设置 canonical 和 JSON-LD 结构化数据。'
const url = 'https://example.com/articles/nuxt-seo'
const imageUrl = 'https://example.com/images/nuxt-seo.jpg'
const authorName = '张三'
const siteName = '示例网站'
const logoUrl = 'https://example.com/logo.png'
const publishedAt = '2025-01-01T08:00:00Z'
const updatedAt = '2025-01-02T08:00:00Z'
useHead({
link: [
{
rel: 'canonical',
href: url,
},
],
script: [
{
type: 'application/ld+json',
innerHTML: JSON.stringify({
'@context': 'https://schema.org',
'@type': 'Article',
headline: title,
description,
image: imageUrl,
author: {
'@type': 'Person',
name: authorName,
},
publisher: {
'@type': 'Organization',
name: siteName,
logo: {
'@type': 'ImageObject',
url: logoUrl,
},
},
datePublished: publishedAt,
dateModified: updatedAt,
mainEntityOfPage: {
'@type': 'WebPage',
'@id': url,
},
}),
},
],
})
</script>
七、使用时的注意事项
首先，所有 URL 最好使用完整地址，例如：
https://example.com/article/1
不要只使用：
/article/1
其次，结构化数据中的标题、描述、作者和日期应与页面实际内容保持一致，不能填写虚假信息。
另外，不同页面应根据实际类型选择合适的 @type。产品页、FAQ 页、面包屑页面等，不一定都应该使用 Article。
最后，结构化数据只是 SEO 和 GEO 的基础优化，不能保证一定提升排名或被 AI 引用。页面本身还需要具备真实、有价值、结构清晰且可抓取的内容。